<script setup lang="ts">
import { onMounted, ref } from "vue";
import {
  addProductCategoryInfo,
  getAllProductCategoryInfo,
  addSubProductCategoryInfo,
  delSubProductCategoryInfo,
  upDataSubProductCategoryInfo
} from "@/api/dictApi";
import { ElMessage } from "element-plus";
//添加商品分类
async function addProductCategory(data) {
  let res = await addProductCategoryInfo(data);
  getAllProductCategory();
}
async function addSubProductCategory(data) {
  let res = await addSubProductCategoryInfo(data);
  getAllProductCategory();
}

function addOneCategory() {
  oneVisible.value = true;
}
//删除二级分类
async function del(row) {
  let res = await delSubProductCategoryInfo(row.id);
  if (res.code == 200) {
    ElMessage({
      message: res.msg,
      type: "success"
    });
  }
  getAllProductCategory();
}
async function edit(row) {
  editVisible.value = true;
  editCategoryData.value = row;
  console.log(row);

  getAllProductCategory();
}

onMounted(() => {
  getAllProductCategory();
});

async function getAllProductCategory() {
  let res = await getAllProductCategoryInfo();
  editableTabs.value = res.data;
}
async function upDataSubProductCategory(data) {
  let res = await upDataSubProductCategoryInfo(data);
  if (res.code == 200) {
    ElMessage({
      message: res.msg,
      type: "success"
    });
  }
  getAllProductCategory();
}
// 标签页
const editableTabs = ref([]);

//移除标签页
const removeTab = tab => {
  let row = { id: tab };
  del(row);
};

// 对话框
const oneVisible = ref(false);
const subVisible = ref(false);
const editVisible = ref(false);
//关闭对话框
function close() {
  resetForm(ruleFormRef.value);
  resetForm(subRuleFormRef.value);
  resetForm(editRuleFormRef.value);
  reset();
}

//重置参数
function reset() {
  addCategoryData.value = {
    code: "",
    name: ""
  };
  addSubCategoryData.value = {
    pid: pid1.value,
    code: "",
    name: "",
    sort: 1,
    state: ""
  };
  editCategoryData.value = {
    id: 0,
    code: "",
    name: "",
    sort: 1,
    state: ""
  };
}
let pid1 = ref(0);
const addCategoryData = ref({
  code: "",
  name: ""
});

const addSubCategoryData = ref({
  pid: 0,
  code: "",
  name: "",
  sort: 1,
  state: ""
});
//表单校验
const ruleFormRef = ref();
const subRuleFormRef = ref();
const editRuleFormRef = ref();

const rules = ref({
  code: [{ required: true, message: "请输入编码", trigger: "blur" }],
  name: [
    {
      required: true,
      message: "请输入名称",
      trigger: "blur"
    }
  ]
});
const subRules = ref({
  code: [{ required: true, message: "请输入编码", trigger: "blur" }],
  name: [
    {
      required: true,
      message: "请输入名称",
      trigger: "blur"
    }
  ]
});
const editRules = ref({});
const submitForm = async formEl => {
  await formEl.validate(valid => {
    if (valid) {
      addSubProductCategory(addCategoryData.value);
      oneVisible.value = false;
      reset();
    }
  });
};
const editSubmitForm = async formEl => {
  await formEl.validate(valid => {
    if (valid) {
      editVisible.value = false;
      upDataSubProductCategory(editCategoryData.value);
      reset();
    }
  });
};
const resetForm = formEl => {
  if (!formEl) return;
  formEl.resetFields();
};

const subSubmitForm = async formEl => {
  await formEl.validate(valid => {
    if (valid) {
      addProductCategory(addSubCategoryData.value);
      subVisible.value = false;
      reset();
    }
  });
};
//切换标签钩子
const handleTabClick = tab => {
  pid1.value = tab.paneName;
  addSubCategoryData.value.pid = pid1.value;
};
//编辑字典
const editCategoryData = ref({
  id: 0,
  code: "",
  name: "",
  sort: 1,
  state: ""
});
</script>

<template>
  <div>
    <!-- 标签页 -->
    <div>
      <el-tabs
        type="card"
        class="demo-tabs"
        :editable="true"
        @tab-remove="removeTab"
        @tab-add="addOneCategory"
        @tab-click="handleTabClick"
      >
        <el-text size="large" type="primary">字典列表</el-text>
        <div style="margin-bottom: 20px">
          <el-button
            v-if="editableTabs[0] ? true : false"
            type="primary"
            style="display: inline-block; float: right"
            @click="subVisible = true"
          >
            新增字典
          </el-button>
        </div>
        <el-tab-pane
          v-for="item in editableTabs"
          :key="item.id"
          :label="item.name"
          :name="item.id"
        >
          <!-- 表格内容 -->
          <div>
            <el-table
              :data="item.tableData"
              style="width: 100%"
              border
              :default-sort="{ prop: 'sort', order: 'ascending' }"
            >
              <el-table-column
                fixed
                type="index"
                label="序号"
                width="110"
                align="center"
              />
              <el-table-column
                prop="code"
                label="字典编码"
                width="220"
                align="center"
              />
              <el-table-column
                prop="name"
                label="字典值"
                width="120"
                align="center"
              />
              <el-table-column
                prop="state"
                label="说明"
                width="420"
                align="center"
              />
              <el-table-column
                prop="sort"
                label="排序"
                width="120"
                align="center"
              />

              <el-table-column
                fixed="right"
                label="操作"
                min-width="120"
                align="center"
              >
                <template #default="scope">
                  <el-button
                    link
                    type="primary"
                    size="small"
                    @click="edit(scope.row)"
                  >
                    编辑
                  </el-button>
                  <el-button
                    link
                    type="primary"
                    size="small"
                    plain
                    @click="del(scope.row)"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <!-- 对话框 -->
    <div>
      <el-dialog
        v-model="oneVisible"
        title="添加字典"
        width="500"
        @close="close"
      >
        <el-form ref="ruleFormRef" :model="addCategoryData" :rules="rules">
          <el-form-item label="编码" prop="code">
            <el-input v-model="addCategoryData.code" />
          </el-form-item>
          <el-form-item label="名称" prop="name">
            <el-input v-model="addCategoryData.name" />
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="oneVisible = false">关闭</el-button>
            <el-button type="primary" @click="submitForm(ruleFormRef)">
              保存
            </el-button>
          </div>
        </template>
      </el-dialog>
    </div>
    <div>
      <el-dialog
        v-model="subVisible"
        title="添加字典"
        width="500"
        @close="close"
      >
        <el-form
          ref="subRuleFormRef"
          :model="addSubCategoryData"
          :rules="subRules"
        >
          <el-form-item label="编码" prop="code">
            <el-input
              v-model="addSubCategoryData.code"
              placeholder="请输入字典编码"
            />
          </el-form-item>
          <el-form-item label="名称" prop="name">
            <el-input
              v-model="addSubCategoryData.name"
              placeholder="请输入字典名称"
            />
          </el-form-item>
          <el-form-item label="排序">
            <el-input-number v-model="addSubCategoryData.sort" :min="1" />
          </el-form-item>
          <el-form-item label="说明" prop="state">
            <el-input
              v-model="addSubCategoryData.state"
              placeholder="请输入说明"
            />
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="oneVisible = false">关闭</el-button>
            <el-button type="primary" @click="subSubmitForm(subRuleFormRef)">
              保存
            </el-button>
          </div>
        </template>
      </el-dialog>
    </div>
    <div>
      <el-dialog
        v-model="editVisible"
        title="编辑字典"
        width="500"
        @close="close"
      >
        <el-form
          ref="editRuleFormRef"
          :model="editCategoryData"
          :rules="editRules"
        >
          <el-form-item label="名称" prop="name">
            <el-input
              v-model="editCategoryData.name"
              placeholder="请输入字典名称"
            />
          </el-form-item>
          <el-form-item label="排序">
            <el-input-number v-model="editCategoryData.sort" :min="1" />
          </el-form-item>
          <el-form-item label="说明" prop="state">
            <el-input
              v-model="editCategoryData.state"
              placeholder="请输入说明"
            />
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="editVisible = false">关闭</el-button>
            <el-button type="primary" @click="editSubmitForm(editRuleFormRef)">
              确定修改
            </el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
</style>
